<template>
<div class="zt">
    <!-- 内容区导航 -->
    <div class="ZTnav">
        <div>
            <div class="ZTinpt">
                <span>主机ID</span>
                <el-input placeholder="请输入" v-model="searchCondition.deviceId"></el-input>
            </div>
            <div class="ZTinpt">
                <span>设备IP</span>
                <el-input placeholder="请输入" v-model="searchCondition.hostIp"></el-input>
            </div>
            <!-- <div class="ZTinpt">
                <span>车辆自编号</span>
                <el-input placeholder="请输入" v-model="searchCondition.busSelfId"></el-input>
            </div>
            <div class="ZTinpt">
                <span>车牌号</span>
                <el-input placeholder="请输入" v-model="searchCondition.installPosition"></el-input>
            </div> -->
            <div class="ZTinpt">
                <span>在线状态</span>
                <el-select v-model="searchCondition.onlineStatus" placeholder="请选择">
                    <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <button @click="resetCondition">重置</button>
            <button @click="conditionSearch(1,numVal)">查询</button>
            <button @click="exportTable">导出</button>
        </div>
    </div>
    <!-- 内容区 -->
    <div class="ZTcontent">
        <!-- el表格 -->
        <div class="sbzt_table">
            <el-table :header-cell-style="{background:'#EBF1FC',color:'#606266'}" :data="ztDetails" border stripe style="width: 100%">
                <el-table-column prop="id" label="序号" width="60">
                </el-table-column>
                <!-- <el-table-column prop="chepai" label="车牌号" width="120">
                </el-table-column>
                <el-table-column prop="bianhao" label="车辆自编号">
                </el-table-column> -->
                <el-table-column prop="zhujiID" label="主机ID">
                </el-table-column>
                <el-table-column prop="IP" label="设备IP">
                </el-table-column>
                <el-table-column prop="macAdd" label="MAC地址">
                </el-table-column>
                <el-table-column prop="banben" label="固件版本">
                </el-table-column>
                <el-table-column prop="zjTime" width="190" label="主机状态">
                    <template slot-scope="scope">
                        <span style="width:16px !important;height:16px !important; display:inline-block;" :class="scope.row.shuji == '16' ? 'online' : 'offline'"></span>
                        <span>{{ scope.row.shuji == "16" ? "在线" : "离线"}}</span>
                        <span>{{ scope.row.zjTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="zhujiState" label="主机使用状态">
                    <template slot-scope="scope">
                        <span style="width:16px !important;height:16px !important; display:inline-block;" :class="scope.row.zhujiState == 391 ? 'notbind': scope.row.zhujiState == 392 ? 'notPut':'isbind'">

                        </span>
                        <span>
                            {{scope.row.zhujiState == 391 ? '未绑定': scope.row.zhujiState == 392 ? '未入库':'已绑定'}}
                        </span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="ZTfooter">
            <span>共{{ infoTotal }}条</span>
            <el-select v-model="numVal" @change="pageTotalChange">
                <el-option v-for="item in num" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-pagination layout="prev, pager, next" :total="this.totalPage" :current-page="currenPage" :page-size="this.pageSize" @current-change="handleCurrentChange">
            </el-pagination>
            <div class="goPage">
                <span>前往</span>
                <el-input oninput="value=value.replace(/[^\d]/g,'')" v-model="pageNumber" placeholder="1"></el-input>
                <span>页</span>
                <el-button class="goPageBtn" type="goon" @click="goPage">确定</el-button>
            </div>
        </div>
    </div>
    <transition name="el-fade-in-linear">
        <div class="deviceDetail" v-show="detailShow">
            <el-descriptions :title="'正在查看设备：'+detailDeviceInfo.deviceId" :column="2" border>
                <template slot="extra">
                    <span class="quxiao" @click="detailHide()"></span>
                </template>
                <el-descriptions-item label="所属项目">
                    {{detailDeviceInfo.proName}}
                </el-descriptions-item>
                <el-descriptions-item label="设备名称">
                    {{detailDeviceInfo.hostName}}
                </el-descriptions-item>
                <el-descriptions-item label="设备序列号">
                    {{detailDeviceInfo.serialNo}}
                </el-descriptions-item>
                <el-descriptions-item label="MAC地址">
                    {{detailDeviceInfo.mac}}
                </el-descriptions-item>
                <el-descriptions-item label="设备厂商">
                    {{detailDeviceInfo.manufacturer}}
                </el-descriptions-item>
                <el-descriptions-item label="安装位置">
                    {{detailDeviceInfo.installPosition}}
                </el-descriptions-item>
                <el-descriptions-item label="协议类型">
                    {{detailDeviceInfo.protocalType}}
                </el-descriptions-item>
                <el-descriptions-item label="固件版本">
                    {{detailDeviceInfo.firmwareVersion}}
                </el-descriptions-item>
                <el-descriptions-item label="设备IP">
                    {{detailDeviceInfo.hostIp}}
                </el-descriptions-item>
                <el-descriptions-item label="前摄像头ID">
                    {{detailDeviceInfo.frontCameraId}}
                </el-descriptions-item>
                <el-descriptions-item label="中摄像头ID">
                    {{detailDeviceInfo.middleCameraId}}
                </el-descriptions-item>
                <el-descriptions-item label="后摄像头ID">
                    {{detailDeviceInfo.rearCameraId}}
                </el-descriptions-item>

            </el-descriptions>
        </div>
    </transition>
</div>
</template>

<script>
export default {
    data() {
        return {
            num: [
                {
                    value: 3,
                    label: "3条/页",
                },{
                    value: 20,
                    label: "20条/页",
                },
                {
                    value: 50,
                    label: "50条/页",
                },
                {
                    value: 100,
                    label: "100条/页",
                },
            ],
            value: "",
            numVal: 20,
            pageNumber: "",
            infoTotal: 100,
            currenPage: 1,
            totalPage: 100,
            pageSize: 10,
            ztDetails: [],
            searchCondition: {
                deviceId: "",
                hostIp: "",
                // busSelfId: "",
                // installPosition: "",
                onlineStatus: "",
            },
            statusList: [
                {
                    value: null,
                    label: null,
                },
                {
                    value: 16,
                    label: "在线"
                },
                {
                    value: 17,
                    label: "离线"
                },
            ],
            detailDeviceInfo: {
                proName: "",
                hostName: "",
                serialNo: "",
                mac: "",
                manufacturer: "",
                installPosition: "",
                protocalType: "",
                firmwareVersion: "",
                hostIp: "",
                frontCameraId: "",
                MiddleCameraId: "",
                RearCameraId: "",
            },
            detailShow: false,

        };
    },
    created() {
        this.changePageList(1, this.numVal);
    },
    methods: {
        resetCondition() {
            let _this = this;
            _this.searchCondition = {
                    deviceId: "",
                    hostIp: "",
                    busSelfId: "",
                    installPosition: "",
                    onlineStatus: "",
                },
                _this.changePageList(1, _this.numVal);
        },
        conditionSearch(page, limit) {
            let _this = this;
            _this.$axios.post("deviceStatus/condition/" + page + "/" + limit,
                    _this.searchCondition)
                .then((res) => {
                    let data = res.data.data;
                    let records = data.records;
                    _this.infoTotal = data.total;
                    _this.totalPage = _this.infoTotal;
                    _this.pageSize = _this.numVal;
                    _this.ztDetails = [];
                    for (let i = 0; i < records.length; i++) {
                        let device = records[i];
                        this.ztDetails.push({
                            id: (page - 1) * limit + 1 + i,
                            zhujiID: device.deviceId,
                            IP: device.hostIp,
                            bianhao: device.busSelfId,
                            chepai: device.installPosition,
                            macAdd: device.mac,
                            banben: device.firmwareVersion,
                            shiping: device.videoStatus,
                            spTime: _this.timeUtils.getTim(device.videoTime),
                            luxiang: device.capStatus,
                            lxTime: _this.timeUtils.getTim(device.capTime),
                            chunchu: device.storageStatus,
                            ccTime: _this.timeUtils.getTim(device.storageTime),
                            shuji: device.onlineStatus,
                            zjTime: _this.timeUtils.getTim(device.onlineTime),
                            zhujiState: device.relationStatus
                        });
                    }
                }).catch()
        },
        showDetailPage(deviceId) {
            let _this = this;
            _this.$axios.get("/device/detail?deviceId=" + deviceId)
                .then((res) => {
                    let deviceInfo = res.data.data;
                    _this.detailDeviceInfo = {
                        deviceId: deviceInfo.deviceId,
                        proName: deviceInfo.proName,
                        hostName: deviceInfo.hostName,
                        serialNo: deviceInfo.serialNo,
                        mac: deviceInfo.mac,
                        manufacturer: deviceInfo.manufacturer,
                        installPosition: deviceInfo.installPosition,
                        protocalType: deviceInfo.protocalType,
                        firmwareVersion: deviceInfo.firmwareVersion,
                        hostIp: deviceInfo.hostIp,
                        frontCameraId: deviceInfo.frontCameraId,
                        middleCameraId: deviceInfo.middleCameraId,
                        rearCameraId: deviceInfo.rearCameraId,
                    }
                    _this.detailShow = true;
                }).catch()
        },
        detailHide() {
            let _this = this;
            _this.detailShow = false;
        },
        handleCurrentChange(val) {
            this.currenPage = val;
            this.changePageList(val, this.numVal);
        },
        pageTotalChange(val) {
            this.totalPage = Math.ceil(this.infoTotal / val);

            this.changePageList(1, val);
        },
        goPage(){
        // console.log("this.totalPage",this.totalPage,this.pageSize,this.pageNumber,this.currenPage);
            if(this.totalPage<=this.pageSize){
                this.pageNumber =  this.currenPage = 1;
            }else{
            //判断一共有多少页
            let page = Math.ceil(this.totalPage/this.pageSize);
            this.pageNumber = this.pageNumber>page?page:this.pageNumber;
            this.currenPage = Number(this.pageNumber) ;
            }
            this.conditionSearch(this.pageNumber,this.numVal)
        },
        changePageList(page, limit) {
            let _this = this;
            this.$axios
                .post("deviceStatus/condition/" + page + "/" + limit, {})
                .then((res) => {
                    let data = res.data.data;
                    let records = data.records;
                    this.infoTotal = data.total;
                    this.totalPage = this.infoTotal;
                    this.pageSize = this.numVal;
                    this.ztDetails = [];
                    for (let i = 0; i < records.length; i++) {
                        let device = records[i];
                        this.ztDetails.push({
                            id: (page - 1) * limit + 1 + i,
                            zhujiID: device.deviceId,
                            IP: device.hostIp,
                            bianhao: device.busSelfId,
                            chepai: device.installPosition,
                            macAdd: device.mac,
                            banben: device.firmwareVersion,

                            shuji: device.onlineStatus,
                            zjTime: _this.timeUtils.getTim(device.onlineTime),
                            zhujiState: device.relationStatus
                        });
                    }

                    //
                })
                .catch();
        },
        exportTable() {
            let _this = this;
            _this.$axios({
                    method: "post",
                    url: "device/export",
                    data:  _this.searchCondition,
                    responseType: 'blob'
                })
                .then((res) => {
                    const filename = res.headers["content-disposition"];
                    const blob = new Blob([res.data]);
                    var downloadElement = document.createElement("a");
                    var href = window.URL.createObjectURL(blob);
                    downloadElement.href = href;
                    downloadElement.download = decodeURIComponent(filename.split("filename=")[1]);
                    document.body.appendChild(downloadElement);
                    downloadElement.click();
                    document.body.removeChild(downloadElement);
                    window.URL.revokeObjectURL(href);
                })
                .catch((e) => {
                    console.log(e);
                })
        }
    },
};
</script>

<style scoped>
/* 点击详情样式 */
.deviceDetail {
    width: 1037px;
    height: 510px;
    background: #fff;
    position: fixed;
    left: 30%;
    top: 15%;
    z-index: 999;
    /* border: 1px solid #000;*/
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5) !important;
}

/deep/ .el-descriptions__title {
    position: relative;
    left: 20px;
}

/deep/ .el-descriptions__header {
    height: 48px;
    background-color: #F5F5F5;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/deep/ .el-descriptions__table {
    position: relative;
    left: 40px !important;
    width: calc(100% - 80px) !important;
}

/deep/ .el-descriptions-item__cell {
    padding-left: 16px !important;
    border: 1px solid #DDDDDD !important;
}

/deep/ .el-descriptions-item__label {

    background-color: #EBF1FC !important;
    font-size: 14px;
    color: #666666 !important;
    width: 12.5%;
}

/deep/ .el-descriptions-item__content {
    color: black;
    width: 37.5%;
}

/* 右上角小按钮 */
.quxiao {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 20px;
    right: 16px;
    background: url(/static/img/close_b.png) no-repeat;
    background-size: 16px;
    cursor: pointer;
}

/* 内容区底部样式 */
.goPage>button:hover {
    cursor: pointer;
}

.goPage>button {
    width: 60px;
    height: 30px;
    background: #3c74e3;
    border-radius: 4px;
    border: none;
    color: #ffffff;
}

.goPage>span:nth-of-type(2) {
    padding-left: 48px;
    padding-right: 8px;
}

.goPage>span:nth-of-type(1) {
    padding-right: 8px;
}

.ZTfooter>.goPage {
    position: absolute;
    right: 10px;
    top: 10px;
}

.goPage>>>.el-input {
    width: 0 !important;
}

.goPage>.el-input>>>.el-input__inner {
    width: 40px !important;
    height: 30px !important;
    padding: 0 5px !important;
}

.el-pagination {
    position: absolute;
    right: 190px;
    top: 10px;
}

.ZTfooter>.el-select>>>.el-input__icon {
    line-height: 30px !important;
}

.ZTfooter>.el-select>>>.el-input__inner {
    width: 100px;
    height: 30px;
}

.ZTfooter>span:nth-of-type(1) {
    margin-right: 16px;
}

.ZTfooter {
    height: 44px;
    display: flex;
    align-items: center;
    border-top: 1px solid #cccccc;
    box-sizing: border-box;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    padding: 0 16px;
    margin-top: 4px;
    position: relative;
}

.ZT_bg {
    background: #f5f5f5;
}

.online {
    background: url(../../static/img/online.png) no-repeat;
    background-size: 15px;
    color: #16a951;
    background-position: 0px 3px;
}

.offline {
    background: url(../../static/img/off-line.png) no-repeat;
    background-size: 15px;
    background-position: 0px 3px;
}

/* 设备状态表格 */
.ZTcontent {
    height: calc(100% + 28px);
    background-color: #fff;
    margin-top: 8px;
    padding: 16px 16px 0 16px;
    box-sizing: border-box;
}

/* 查询按钮 */
.ZTnav button:nth-of-type(2) {
    color: #fff;
    background: url(../../static/img/serch.png) no-repeat #3c74e3;
    background-size: 15px 15px;
    background-position: 14px 10px;
}

.ZTnav button:nth-of-type(1) {
    background: url(../../static/img/sx.png) no-repeat #fff;
    background-size: 15px 15px;
    background-position: 14px 10px;
}

.ZTnav button:nth-of-type(3) {
    color: #fff;
    background: url(/static/img/serch.png) no-repeat #3c74e3;
    background-size: 15px 15px;
    background-position: 14px 10px;
}

.ZTnav button {
    float: right;
    width: 80px;
    height: 36px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    margin: 40px 8px 16px 8px;
    padding-left: 26px;
    box-sizing: border-box;
    font-size: 14px;
}

/* 输入搜索框 */
.el-select>>>.el-input__icon {
    line-height: 36px !important;
}

.el-select>>>.el-input__inner,
.el-input>>>.el-input__inner {
    width: 200px;
    height: 36px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    padding-left: 8px;
    box-sizing: border-box;
}

.ZTinpt>span {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 32px;
    color: rgba(0, 0, 0, 0.6);
}

.ZTinpt {
    width: 198px;
    padding-left: 16px;
    margin-top: 12px;
    display: inline-block;
}

/* 内容导航区 */
.ZTnav {
    width: 100%;
    height: 93px;
    background-color: #fff;
    margin-top: 2px;
    margin-right: 8px;
}

.zt {
    height: calc(100% - 177px);
}

button {
    cursor: pointer;
}

/* el table */
.sbzt_table {
    height: calc(100% - 82px);
    overflow-y: scroll;
}

/* 滚动条样式 */
.sbzt_table::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.sbzt_table::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background: #3c74e3;
}

.sbzt_table::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #f5f5f5;
}

.sbzt_table>>>.table_key {
    color: #3C74E3;
    cursor: pointer;
}

.sbzt_table .isbind {
    background: url(../../static/img/393.png) no-repeat;
    background-size: 15px;
    color: #16a951;
    background-position: 0px 3px;
}

.sbzt_table .notbind {
    background: url(../../static/img/391.png) no-repeat;
    background-size: 15px;
    background-position: 0px 3px;
}

.sbzt_table .notPut {
    background: url(../../static/img/392.png) no-repeat;
    background-size: 15px;
    background-position: 0px 3px;
}

/deep/ .el-table th.el-table__cell.is-leaf,
/deep/ .el-table td.el-table__cell {
    border: none !important;
}

/deep/ .el-table th {
    padding: 0 !important;
    height: 48px !important;

}

/deep/ .el-table th.el-table__cell.is-leaf .cell {
    line-height: 32px;
    border-left: 1px solid #cccccc !important;
}

/deep/ .el-table .el-table__row td {
    padding: 0 !important;
    height: 40px;
}

/deep/ .el-table th:nth-child(1).el-table__cell.is-leaf .cell {
    border: none !important;
}

/deep/ .el-table--border,
.el-table--group {
    border: none;
}

/deep/ .el-table .el-table__row--striped td {
    background-color: #f5f5f5 !important;
}
</style>
